<template>
	<view class="flex flex-col items-center relative p-20 rounded-lg live_box mb-20"
		:class="index==0||index==1?specialClass[index]:classList[Math.floor(Math.random() * 4)]"
		@click="onPath(val.id)">
		<view class="flex w-full justify-end">
			<ImageBoxVue class="" src="/static/live/signal.png" width="27rpx" height="21rpx">
			</ImageBoxVue>
		</view>
		<view class="flex w-full">
			<view class="flex flex-col items-center">
				<view class="w-80 h-80 rounded-full border-solid border-[#BADEFF] border-2 overflow-hidden mb-10">
					<ImageBoxVue :src="val.anchor.headimg"></ImageBoxVue>
				</view>
				<text class="w-100 text-[11px] ellipsis text-center">{{val.anchor.name}}</text>
			</view>
			<view class="ml-20 flex-1">
				<text class="font-bold">{{val.name}}</text>
				<view class="flex my-10">
					<view class="p-4 bg-[#D7F0FF] rounded-sm mx-4" v-for="e,i in val.labels" :key="i">
						<text class="text-[#3689C6] text-[10px]">{{e}}</text>
					</view>
				</view>
				<view class="flex">
					<text
						:class="[index==0||index==1?'text-white':'text-gray-400','text-[11px]']">{{val.describe}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const {
		val,
		index
	} = defineProps(['val', 'index'])
	const specialClass = [
		['bg-gradient-to-r from-[#FDC09B] to-[#FDDC9B] border-[#FFB351] border-solid'],
		['bg-gradient-to-r from-[#D4AAFF] to-[#FFAEFC] border-[#DB7EFF] border-solid']
	]
	const classList = [
		['bg-gradient-to-b from-[#DEF3FF] to-[#FFFFFF] border-[#C6EBFF] border-solid'],
		['bg-gradient-to-b from-[#FFEEDE] to-[#FFFFFF] border-[#FFD3C6] border-solid'],
		['bg-gradient-to-b from-[#E4E8FF] to-[#FFFFFF] border-[#C7C6FF] border-solid'],
		['bg-gradient-to-b from-[#FFE9FD] to-[#FFFFFF] border-[#FAC6FF] border-solid'],
	]
	const onPath = (id) => {
		uni.navigateTo({
			url: "/pages/live/liveRoom?id=" + id
		})
	}
</script>

<style lang="less">
	.live_box {
		width: calc(50% - 10rpx)
	}
</style>